<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: pink;
        }

        p {
            /* width: 200px;
            height: 200px; */
            background-color: black;
            color: aliceblue;
            /* 为啥我设置后不拉伸？jsutify居中对齐 */
            /* text-align: justify; */
            /* border: 1px solid black; */
            direction: ltr;
        }

        img.top {
            vertical-align: top;
        }

        a {
            text-decoration: none;
        }

        p.uppercase {
            text-transform: uppercase;
        }

        p.text-in {
            text-indent: 48px;
            letter-spacing: 1px;
            line-height: 32px;
            word-spacing: 3px;
            white-space: nowrap;
        }

        .vertical-align {
            /* 用图片vertical-align进行垂直居中去掉下边距 */
            vertical-align: bottom;
        }

        .box1 {
            /* 对溢出的内容省略号显示 */
            width: 200px;
            white-space:nowrap;
            overflow: hidden;
            text-overflow:ellipsis;
        }
    </style>

</head>

<body>
    <!-- 文本的水平和垂直对齐，文本的其他样式 -->
    <!-- （如果文本方向是从左到右，则默认为左对齐；如果文本方向是从右到左，则默认是右对齐）：
    如何确定文本方向？
-->
    <p>另一段文本。一段文本。一段文本。一段文本。一段文本。一段文本。</p>
    <p>。happy是我</p>

    <div>一副<img src=".././images/绿草茵茵.jpg" alt="" width="180" height="167">默认</div>
    <div>一副<img class="top" src=".././images/绿草茵茵.jpg" alt="" width="180" height="167">上对其</div>
    <div><a href="#">文本装饰 链接</a></div>
    <p class="uppercase">This is some text.</p>
    <p class="text-in">In my younger and more vulnerable years my father gave me some advice that I've been turning over
        in my mind ever
        since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world
        haven't had the advantages that you've had.'</p>
    <p>
        <img src="../images/绿草茵茵.jpg" alt="" class="vertical-align">
    </p>
    <div class="box1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, error dolore veritatis culpa cum magnam corrupti
        sunt consectetur quidem unde vel soluta quasi harum et, rem blanditiis iusto deleniti quia.
    </div>
</body>

</html>